<template>
  <div class="showCard">
    <h3 class="showTitle">五谷丰登</h3>
    <div class="showCardWarp">
      <ul class="CardList">
        <li v-for="(item,index) in gCard"
            class="cardWarp"
            :style="{'backgroundImage':'url('+(item.imageUrl)+')'}"
            :key="item.id"
            :class="{'CardWarpOp':item.active}"
            @click="cardClick(0,index)">
          <b class="points"
             :style="item.points==10?{'left':'13px'}:{},item.poker%2==0?{'color':'#000'}:{'color':'red'}">{{item.points}}</b>
          <i :class="'poker poker'+item.poker"></i>
          <em></em>
          <span>{{item.general}}已选</span>
        </li>
      </ul>
    </div>
    <div class="bar">
      <div class="bar-conte">
        <div class="description">
          <span>{{showGrain.whoUse|general_who}}正在选牌</span>
        </div>
        <div class="fff-back"
             :style=""></div>
      </div>
    </div>
  </div>

</template>
<script>
import { roundOf, clone, ranDomArraySet } from "@/assets/js/cardsEvent.js";
let that
export default {
  data () {
    return {
      gCard: [],
      // 玩家摸过牌没有
      aksMy: false,
      // 其他玩家随机摸牌
      rD: []
    }
  },
  props: ['showGrain', 'cardsList', 'Leg', 'recording'],
  beforeCreate () {
    that = this
  },
  created () {
    this.gCard = this.cardsList.splice(0, this.Leg.length).map(element => {
      element.active = false;
      return this.$parent.searchCard(element.id);
    });
    this.$set(this, 'rD', clone(new ranDomArraySet(this.Leg.length, 0).ranDomGet()));
  },
  methods: {
    cardClick (who, index) {
      let val = this.gCard[index];
      if (who === 0 && this.aksMy) {
        return false;
      }
      if (!val.active) {
        val.active = true;
        if (who === 0) {
          this.aksMy = true;
          this.rD.splice(this.rD.indexOf(index), 1);
          this.rD.forEach(element => {
            this.$set(this.gCard[element], 'general', this.Leg[who + 1].general);
          });
          val.general = this.Leg[0].general;
        }
        this.Leg[who].hands.push(val);
        this.showGrain.whoUse = who < this.Leg.length - 1 ? ++who : -1;
        return true;
      }
      return false;
    },
    ranDom: function (whoNext, index) {
      let funBol = this.cardClick(whoNext, index);
    }

  },
  computed: {
    id_G: function () {
      return this.showGrain.whoUse;
    }
  },
  watch: {
    id_G: function (newValue) {
      if (newValue !== 0) {
        if (newValue !== -1) {
          setTimeout(() => {
            this.ranDom(newValue, this.rD[newValue - 1]);
          }, 1500);
        } else {
          this.showGrain.bol = false;
          roundOf.call(this.$parent, 3, this.Leg[0]);
        }
      }
    }
  },
  filters: {
    general_who: function (val) {
      if (val === -1) {
        return " "
      } else {
        return that.Leg[val].general
      }
    }
  }
}
</script>
<style scoped>
.showCard {
  position: absolute;
  z-index: 98;
  top: 60px;
  left: 0;
  width: 100%;
  height: 480px;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
}
.showCardWarp {
  position: relative;
  margin-top: 20px;
  width: 100%;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  /* flex-direction: column; */
}
.showTitle {
  font-size: 2.3em;
  font-weight: bold;
  background-image: -webkit-linear-gradient(bottom, #805937, #f0db65, #faf7d5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  /* flex-wrap: wrap-reverse; */
}
.CardList {
  width: 66%;
  height: 280px;
  background: rgba(72, 65, 56, 0.8);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.CardList li {
  position: relative;
  margin-right: 25px;
  width: 138px;
  height: 196px;
  border-radius: 5px;
  background-size: 100% 100%;
  cursor: pointer;
  transition: all 0.3s;
}
.CardList li:hover {
  -moz-box-shadow: 0px 0px 20px #ffffff;
  -webkit-box-shadow: 0px 0px 20px #ffffff;
  box-shadow: 0px 0px 20px #ffffff;
  transition: all 0.3s;
}
.CardList li:last-child {
  margin-right: 0px;
}
.CardList li > span {
  position: absolute;
  display: none;
}
.points {
  position: absolute;
  left: 15px;
  top: 5px;
  font-size: 1.5em;
  letter-spacing: -3px;
}
.poker {
  position: absolute;
  left: 10px;
  top: 35px;
}
.CardWarpOp {
  width: 104px !important;
  height: 140px !important;
}
.CardWarpOp > em {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 4;
}
.CardWarpOp > span {
  right: 0;
  bottom: 0;
  display: inline !important;
  letter-spacing: 0.3em;
  color: #fff;
  z-index: 5;
}

.bar {
  background-image: linear-gradient(to bottom, #ebd26a, #d00c24);
  -moz-box-shadow: 0px 0px 10px #ffffff;
  -webkit-box-shadow: 0px 0px 10px #ffffff;
  box-shadow: 0px 0px 10px #ffffff;
  width: 700px;
  height: 15px;
  margin: 25px auto;
  border-radius: 10px;
}
.description {
  position: absolute;
  left: 50%;
  margin-left: -47px;
}
.description span {
  position: relative;
  bottom: -30px;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.3em;
  color: #c5b16c;
}
</style>
